<template>
	<div class="outer">
    <headers @back-click="back()" :headers="headers">
      <div slot="righIcon" class="rightPosi" @click="toggleBar()"></div>
    </headers>
    <router-view></router-view>
    <popup v-model="isOpen" width="100%" :position="'right'" :popup-style="popUpStyle" :width="'60%'" >
      <div class="cate-wrapper">
        <div class="title">全部分类<i @click="toggleBar()"></i></div>
        <div class="fst-cate" v-for="i in cateList" :key="i.id">
            <div class="content" @click="toggleFold(i)">
                <div>{{i.category}}</div>
                <div class="arrow" v-if="i.goodsTypeList.length > 0">
                  <i :class="{'checked': i.fstShow}"></i>
                </div>
            </div>
            <div class="sec-wrapper" v-if="i.goodsTypeList.length > 0 && i.fstShow">
                <div class="sec-cate" v-for="t in i.goodsTypeList" @click="SecPage(t.id,t.name,t.categoryId)" :class="{'isSelec': secId == t.id }">
                    <div>{{t.name}}</div>
                    <div class="check" v-if="secId == t.id">
                      <i></i>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import blankPage from '@/components/blankPage'
import {getAllCate} from "@/api/homepage.js"
import { Popup} from 'vux'
export default {
  name: "secondPage",
  components: {
    Popup,
    blankPage
  },
  data: function(){
    return {
      headers: {
        title: this.$route.params.name,
      },
      isOpen: false,
      cateList: [],
      popUpStyle: {
        zIndex: 800
      },
      cateId: this.$route.params.cateid,
      secId: this.$route.params.id,
    }
  },
  methods: {
    back: function(){
      this.$router.go(-1);
    },
    toggleFold: function(item){
      if(item.fstShow){
        item.fstShow = false;
      }else {
        item.fstShow = true;
      }
      this.$forceUpdate();
    },
    SecPage: function(id,name,cateid){
      this.$router.push({name:'secondDetail' , params: {'id': id, 'name': name,'cateid': cateid}});
      setTimeout(()=>{
        this.isOpen = false;
      },400)
    },
    toggleBar: function(){
      this.isOpen =  this.isOpen == true ? false : true;
    },
    allCates: function(){
      getAllCate().then( data => {
        if(data.code ==200){
          this.cateList = data.data;
          this.redoBody(this.cateList);
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
      })
    },
    redoBody: function(data){
      let self = this;
      data.forEach(function(item){
        if(item.categoryId == self.cateId){
          item.fstShow = true;
        }else {
          item.fstShow = false;
        }
      })
    },
  },
  mounted: function(){
    this.allCates();
  },
  watch: {
    '$route' (to, from) {
      this.cateId = this.$route.params.cateid,
      this.secId = this.$route.params.id
    }
  },

}
</script>
<style lang="scss" scoped>
	.outer {
		height: 100%;
    width: 100%;
    position: absolute;
	}
  .rightPosi {
    width: 22px;
    height: 20px;
    margin-right: 16px;
    background: url("../../assets/img/comm/head-icons.png");
    background-size: 500%;
    background-position: 25% 0;
  }
  .cate-wrapper {
    min-height: 100%;
    background: #fff;
    padding: 0 16px;
    & .title{
      width: 100%;
      height: 44px;
      line-height: 44px;
      font-size: 14px;
      color: #333;
      &>i {
        height: 20px;
        float: right;
        width: 20px;
        display: block;
        background: url("../../assets/img/comm/head-icons.png") 0 0 no-repeat;
        background-size: 500%;
        margin-top: 0.25rem;
        background-position: 25% 0;
      }
    }
    & .fst-cate {
      width: 100%;
      font-size: 14px;
      color: #333;
      & .content {
        height: 44px;
        line-height: 44px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &>.arrow {
          height: 44px;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 20px;
          &>i {
            background: url('../../assets/img/comm/top_arrow@3x.png') 0 0 no-repeat;
            width:15px;
            height:15px;
            background-size: 50%;
            transform: rotate(-90deg);
          }
          & .checked {
            transform: rotate(90deg);
          }
        }
        &>i {
          height: 44px;
          line-height: 44px;
          font-size: 0.5rem;
          color: #666;
          width: 0.4rem;
        }
        & .rotateArr {
          transform: rotate(180deg);
        }
      }
      & .isSelec {
        color: #69afff !important;
      }
      & .sec-wrapper {
        width:100%;
        padding-left: 20px;
        padding-right: 8px;
         & .sec-cate {
            height: 44px;
            line-height: 44px;
            font-size: 14px;
            color: #999;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &>.check {
              height: 44px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 20px;
              margin-right: 32px;
              &>i {
                background: url('../../assets/img/comm/check.png');
                width:20px;
                height:20px;
                background-size: 100%;
              }
            }
         }
      }
    }
  }
</style>